<!-- 
	富文本组件
	1、富文本：背景颜色、上边距、下边距、左边距、右边距
-->
<template>
	<div :class="className">
		<!-- style -->
		<div v-html="css"></div>
		<div class="html-box" v-html="data.htmlValue"></div>
	</div>
</template>

<script>
	// 自定义样式
	const css = function() {
		const {
			bgColor,
			paddingTop,
			paddingBottom,
			paddingLeft,
			paddingRight,
		} = this.data;

		return `
	        .component-${this.id} .html-box {
	            background-color: ${bgColor || '#f8f8f8'};
	            padding-top: ${paddingTop}px;
	            padding-bottom: ${paddingBottom}px;
	            padding-left: ${paddingLeft}px;
	            padding-right: ${paddingRight}px;
	        }
	
	        .component-${this.id} .html-box p {
	            margin: 0;
	        }
	
	        .component-${this.id} .html-box img {
	            max-width: 100%;
	        }
	    `;
	};

	export default {
		name: 'u_richtext',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						//背景颜色
						"bgColor": {
							type: String,
							default: '#ffffff'
						},
						//上边距
						"paddingTop": {
							type: Number,
							default: 0
						},
						//下边距
						"paddingBottom": {
							type: Number,
							default: 0
						},
						//左边距
						"paddingLeft": {
							type: Number,
							default: 0
						},
						//右边距
						"paddingRight": {
							type: Number,
							default: 0
						},
						//富文本内容
						"htmlValue": {
							type: String,
							default: ''
						}
					}
				}
			}
		},
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.html-box {
		min-height: 30px;
	}
</style>
